<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="pages font-B">
      <view class="pages-top jh-space-between jh-align-center">
        <view class="jh-flex-center" style="width: 50px;height: 50px;">
          <image style="width: 9px;height: 16px;display: block;" :src="ossDomain + '/icon-bg3.png'"></image>
        </view>
        <view class="font-14 c-fff ">
          裁剪图片
        </view>
        <view class="jh-flex-center" style="width: 50px;height: 50px;" @tap='showActionSheet'>
          <image style="width: 24px;height: 24px;display: block;" :src="ossDomain + '/icon-more.png'"></image>
        </view>
      </view>
      <view class="cropper">
        <tui-picture-cropper
          ref='tuiPictureCropper'
          :height='150'
          :width='150'
          :lockRatio="true"
          custom
          :imageUrl="imageUrl"
          @ready="ready"
          @cropper="cropper"
        ></tui-picture-cropper>
      </view>
    </view>
  </page-body>
</template>

<script>
  import tuiPictureCropper from '@/components/thorui/tui-picture-cropper/tui-picture-cropper'
  export default {
    components: {
      tuiPictureCropper
    },
    data() {
      return {
        version: '1.0.0',
        src: '',
        imageUrl: '', //要裁剪的图片
        ossDomain: uni.ossDomain,
        list: ['拍照', '查看上一张图片', '保存']
      };
    },
    onLoad(options) {
      this.src = options.src || '';
      //如果从上个页面传值时可显示loading
      this.src && uni.showLoading({
        title: '请稍候...',
        mask: true
      });
      // #ifdef APP-PLUS
      // 手机品牌
      plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
        this.version = wgtinfo.version
      });
      // #endif
      // #ifdef MP-WEIXIN
      this.version = wx.getAccountInfoSync().miniProgram.version
      //#endif
    },
    methods: {
      showActionSheet () {
        uni.showActionSheet({
          itemList: this.list,
          success: e => {
            switch (e.tapIndex){
              case 0:
                break;
              case 1:
                break;
              case 2:
                this.$refs.tuiPictureCropper.getImage()
                break;
              default:
                
                break;
            }
          }
        })
      },
      ready() {
        this.imageUrl = this.src;
      },
      prePage() {
        let pages = getCurrentPages();
        let prePage = pages[pages.length - 2];
        // #ifdef H5
        return prePage;
        // #endif
        return prePage.$vm;
      },
      cropper(e) {
        uni.showLoading()
        this.$http.getUploadToken().then(res => {
          let data = res.data.token
          uni.$uploadUrl = {
            key: data.dir+(new Date()).getTime()+'.png',
            token: data.token,
            url: data.upload_url.upload_url
          }
          let {key, token, url} = uni.$uploadUrl
          uni.uploadFile({
            url: url,
            filePath: e.url,
            header: {
              appType: '3',
              version: this.version,
              sm: '',
              KaToken: uni.getStorageSync('KaToken')
            },
            name: 'file',
            formData: {
              key,
              token,
            },
            success: res => {
              uni.hideLoading()
              try {
                let _data = JSON.parse(res.data);
                _data = _data.data[0]
                console.log(_data);
                this.prePage().avatar = 'http://' + _data.url
                setTimeout(() => {
                  uni.navigateBack()
                })
              } catch (e) {
                uni.showToast({
                  title: '上传失败'
                })
              }
            },
            fail: err => {
              uni.hideLoading()
            }
          });
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
    &-top{
      height: 50px;
      border-bottom: 1px solid #fff;
      position: relative;
      z-index: 2;
    }
  }
</style>
